<template>
  <div>
    <p>本地坐标和世界坐标</p>
    <div class="three_box"></div>
  </div>
</template>

<script setup>
import { h, nextTick } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
nextTick(() => {
  let Dom = document.querySelector(".three_box");
  let width = Dom.offsetWidth;
  let height = Dom.offsetHeight;
  // 场景
  const scene = new THREE.Scene();
  // 坐标
  const locationXyz = new THREE.AxesHelper(100);
  scene.add(locationXyz);
  // 几何体
  const geo = new THREE.BoxGeometry(50, 50, 50);
  //   材质
  const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff,
    transparent: true,
    opacity: 0.7,
  });
  //   模型对象
  const mesh = new THREE.Mesh(geo, material);
  mesh.position.set(50, 0, 0);
  //   scene.add(mesh);
  // 光源
  let pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(100, 100, 100);
  scene.add(pointLight);
  let amLight = new THREE.AmbientLight(0xffffff);
  scene.add(amLight);
  let dirLight = new THREE.DirectionalLight(0xffffff, 1);
  dirLight.position.set(100, 100, 100);
  dirLight.target = mesh;
  scene.add(dirLight);
  //   相机
  const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 3000);
  camera.position.set(10, 150, 150);
  camera.lookAt(mesh.position);
  // 渲染器
  const renderer = new THREE.WebGLRenderer({
    antialias: true,
  });
  renderer.setSize(width, height);
  Dom.appendChild(renderer.domElement);
  //  相机控件
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", function () {
    renderer.render(scene, camera);
  });
  // 像素比
  renderer.setPixelRatio(window.devicePixelRatio);
  // 组
  let group = new THREE.Group();
  group.add(mesh);
  group.position.x = 20;
  scene.add(group);
  // 获取世界坐标
  // 创建一个3维向量表示坐标
  const V3 = new THREE.Vector3();
  mesh.getWorldPosition(V3);
  console.log("世界坐标", V3);
  //   创建一个局部坐标系
  let smallxyz= new THREE.AxesHelper(60)
  mesh.add(smallxyz);

  
  renderer.render(scene, camera);
});
</script>

<style scoped>
.three_box {
  width: 60vw;
  height: 60vh;
}
</style>